<!-- 申请分销商 -->
<template>
	<view class="apply-commission-wrap" style="background: #fff;">
 	<!-- <ljshop-navbar :background="{ background: 'none' }" backText="申请对接店铺" backIconColor="#333" ></ljshop-navbar> -->
	<view style="margin-left: 30rpx;padding-top: 60rpx;"> 	<!-- 表单 -->
	
	</view>
		<view class="apply-form">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<block v-for="(form, index) in formList" :key="index">
					<u-form-item v-if="form.type === 'input'" :labelStyle="labelStyle" 　 label-width="150"
						label-position="left" :label="form.name" :prop="`value${index}`">
						<u-input :disabled="!hasPostBtn" :placeholder="`请输入${form.name}`"
							:placeholderStyle="placeholderStyle" v-model="model['value' + index]" type="text"></u-input>
					</u-form-item>
					<u-form-item v-if="form.type === 'number'" :labelStyle="labelStyle" label-position="left"
						:label="form.name" :prop="`value${index}`" label-width="150">
						<u-input :disabled="!hasPostBtn" :placeholder="`请输入${form.name}`"
							:placeholderStyle="placeholderStyle" v-model="model['value' + index]" type="number">
						</u-input>
					</u-form-item>
					<u-form-item v-if="form.type === 'image' && form.name=='店铺logo'" :labelStyle="labelStyle" :prop="`value${index}`"
						:label="form.name" label-position="top" label-width="150" :borderBottom="true">
						<u-upload :deletable="hasPostBtn" :placeholderStyle="placeholderStyle" :showProgress="false"
							@on-uploaded="uploadSuccess($event, `value${index}`,form.name)"
							@on-remove="uploadRemove($event, `value${index}`)" :file-list="model[`valueList${index}`]"
							:action="`${$API_URL}api/common/file/upload`" width="148" height="148" maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item v-if="form.type === 'image' && form.name=='身份证姓名面'" :labelStyle="labelStyle" :prop="`value${index}`"
						:label="form.name" label-position="top" label-width="150" :borderBottom="true">
						<u-upload :deletable="hasPostBtn" :placeholderStyle="placeholderStyle" :showProgress="false"
							@on-uploaded="uploadSuccess($event, `value${index}`,form.name)"
							@on-remove="uploadRemove($event, `value${index}`)" :file-list="model[`valueList${index}`]"
							:action="`${$API_URL}api/common/file/upload`" width="200" height="148" maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item v-if="form.type === 'image' && form.name=='身份证国徽面'" :labelStyle="labelStyle" :prop="`value${index}`"
						:label="form.name" label-position="top" label-width="150" :borderBottom="true">
						<u-upload :deletable="hasPostBtn" :placeholderStyle="placeholderStyle" :showProgress="false"
							@on-uploaded="uploadSuccess($event, `value${index}`,form.name)"
							@on-remove="uploadRemove($event, `value${index}`)" :file-list="model[`valueList${index}`]"
							:action="`${$API_URL}api/common/file/upload`" width="200" height="148" maxCount="1"></u-upload>
					</u-form-item>
				</block>
				<view class="agreement u-flex" v-if="protocol && hasPostBtn">
					<u-checkbox v-model="model.agreement" activeColor="#b095ff" shape="circle" @change="onAgreement">
					</u-checkbox>
					<view class="agreement-text"
						@tap="$Router.push({ path: '/pages/public/richtext', query: { id: protocol.richtext_id } })">
						我已阅读并遵守
						<text class="text-underline">{{ protocol.name }}</text>
					</view>
				</view>
				<button class="u-reset-button save-btn"  @tap="onSubmit"
					:disabled="isFormEnd">确认提交</button>
			</u-form>
		</view>
	</view>
</template>

<script>
 
	export default {
		components: {
		 
		},
		data() {
			return {
				formList: [
					{
						"name": "店铺名称",
						"type": "input"
						},
						{
						"name": "真实姓名",
						"type": "input"
					     },
						 {
						 "name": "店铺介绍",
						 "type": "input"
						  },
					{
						"name": "身份证号码",
						"type": "input"
					},
					{
						"name": "手机号",
						"type": "number"
					},
					{
						"name": "住址",
						"type": "input"
					},
					 
					 
					 {
					 	"name": "店铺logo",
					 	"type": "image"
					 },
					{
						"name": "身份证姓名面",
						"type": "image"
					},
					{
						"name": "身份证国徽面",
						"type": "image"
					}
				],
				formHeadImg: '', //表单头部背景
				protocol: null, //协议
				isFormEnd: false, //提交成功
				hasPostBtn: true, //是否显示提交按钮
				errorType: ['message'],
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '600',
					color: '#333'
				},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				model: {},
				inputNumber: [{
					required: true,
					message: '内容不能为空！',
					trigger: ['change', 'blur']
				}],
				inputImage: [{
					required: true,
					message: '请上传图片',
					trigger: ['change', 'blur']
				}],
				idCardImageFront:"",
				logo:"",
				idCardImageReverse:"",
				rules: {},
				storeId:"",
				
			};
		},
		computed: {
			
		},
		onLoad() {
	    
		},
		onShow() {
	 
		},
		methods: {
			 
			// 上传图片成功-单图
			uploadSuccess(e, value,name) {
			 
				if(name=="身份证姓名面"){
					this.idCardImageFront = e[0].response.url;
				}
				if(name=="身份证国徽面"){
					this.idCardImageReverse = e[0].response.url;
				}
				if(name=="店铺logo"){
					this.logo = e[0].response.url;
				}
				
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// 移除图片
			uploadRemove(index, value) {
				this.model[value] = '';
			},

			// 勾选同意
			onAgreement(e) {
				this.model.agreement = e.value;
			},

			initRules() {
				let that = this;
				that.formList.forEach((item, index) => {
					that.model = {
						...that.model,
						...{
							[`value${index}`]: item.value ? item.value : null
						}
					}; //构造model数据
					that.model.agreement = false;
					if (item.type === 'input' || item.type === 'number') {
						//构造表单验证规则
						that.rules = {
							...that.rules,
							...{
								[`value${index}`]: that.inputNumber
							}
						};
					}
					if (item.type === 'image') {
						if (item.value) {
							let arr = [];
							arr.push({
								url: item.value
							});
							that.model = {
								...that.model,
								...{
									[`valueList${index}`]: arr
								}
							};
						}

						that.rules = {
							...that.rules,
							...{
								[`value${index}`]: that.inputImage
							}
						};
					}
				});
			},

			//申请分销商
			applyCommission(data) {
				let that = this;
		 
				that.isFormEnd = true;
				that.$http(
					'goods.ccapply', {
						UId:uni.getStorageSync("UId"),
						name: data[0].value,
						legalPerson: data[1].value,
						desc: data[2].value,
						idCardNo: data[3].value,
						mobile: data[4].value,
						address:data[5].value,
						logo:this.logo,
						idCard:this.idCardImageFront,
						idCardImageReverse:this.idCardImageReverse
					},
					'申请中...'
				).then(res => {
				 
				 
					that.isFormEnd = false;
						uni.showToast({
							title: res.message,
							success: () => {
								if(res.message == "操作成功"){
								setTimeout(()=>{
									that.$Router.back();
								},1500)	
								}
							}
						});
				});
			},

			// 提交
			onSubmit() {
			let that = this;
			this.$refs.uForm.validate(valid => {
				if (valid) {
					 
					let formData = this.formList;
					formData.map((item, index) => {
						item.value = that.model[`value${index}`];
					});
					this.applyCommission(formData);
				} else {
					 
					this.$u.toast('请完善表单');
				}
			});
			},
			showsfchange(){
				
			}
		}
	};
</script>

<style lang="scss">
	.apply-commission-wrap {
		height: 100%;
		background-color: #fff;

		.head-box {
			width: 100%;
			height: 400rpx;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
	}

	// 表单
	.apply-form {
		width: 750rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;

		.agreement {
			margin-top: 20rpx;

			.agreement-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #b095ff;

				.text-underline {
					text-decoration: underline;
				}
			}
		}

		.save-btn {
			width: 690rpx;
			line-height: 86rpx;
			background: linear-gradient(-90deg, #f9731e, #f9731e);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 43rpx;
			font-weight: 500;
			color: #ffffff;
			margin: 30rpx auto;
		}
	}
	.search {
		height: 100rpx;
		width: 750rpx;
		background: #fff;
		.search-content {
			width: 710rpx;
			padding: 0 18rpx;
			background-color: #f2f2f2;
			border-radius: 100rpx;
			height: 64rpx;
			.search-icon {
				color: #606266;
				size: 34rpx;
			}
			.pl-text {
				color: $u-tips-color;
				margin-left: 10rpx;
			}
		}
	}
</style>
